<template>
	<view class="tabs">
		<scroll-view class="active-switch" scroll-x :scroll-into-view="id" scroll-with-animation>
			<view class="switch-container">
				<view
					v-for="(item, index) in TabList"
					:key="index"
					:class="['active-item relative', currentTab == index && 'focus', item.message && 'have-message', TabList.length == 3 && 'fix']"
					@tap="tabChange(index)"
					:id="`tab_${index}`"
				>
					<view class="item">{{ item.title }}</view>
				</view>
				<view class="focus-line" :class="[TabList.length == 3 && 'fix']" :style="{ transform: transformX, width: lineWidth + 'rpx' }"></view>
			</view>
		</scroll-view>
		<view class="tab-pane-view" @touchstart="touchstart" @touchend="touchend">
			<view class="tab-pane-group" :style="{ transform: transformXx }"><slot></slot></view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'Tabs',
	data() {
		return {
			id: 'tab_0',
			start: 0
		};
	},
	props: {
		TabList: {
			default: () => {
				return [];
			},
			type: Array
		},
		currentTab: {
			default: 0,
			type: Number
		},
		lineWidth: {
			default: 189,
			type: Number
		}
	},
	computed: {
		transformX() {
			let currentTab = this.currentTab;
			return `translate3d(${currentTab * 100}%, 0px, 0px)`;
		},
		transformXx() {
			let currentTab = this.currentTab;
			return `translate3d(-${currentTab * 100}%, 0px, 0px)`;
		}
	},
	methods: {
		tabChange(index) {
			if (this.currentTab != index) {
				console.log(`emit:${index}`);
				this.$emit('tabs', index);
				this.id = `tab_${index}`;
			}
		},
		touchstart(e) {
			this.start = e.touches[0].clientX;
		},
		touchend(e) {
			let end = e.changedTouches[0].clientX;
			if (end - this.start > 100 && this.currentTab >= 1) {
				this.tabChange(this.currentTab - 1);
			} else if (this.start - end > 100 && this.currentTab < this.TabList.length - 1) {
				this.tabChange(this.currentTab + 1);
			}
		}
	}
};
</script>
<style lang="less">
.tabs {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;

	.active-switch {
		overflow: scroll;

		.switch-container {
			position: relative;
			display: flex;
			flex-direction: row;
			.focus-line {
				flex: 1;
				width: 189rpx;
				position: absolute;
				bottom: 0;
				border-bottom: 4rpx solid #e41805;
				transition: 0.3s;

				&.fix {
					width: 250rpx;
				}
			}
		}

		.active-item {
			position: relative;
			min-width: 160rpx;
			width: 160rpx;
			flex: 1;
			height: 100rpx;
			transition: 0.3s;
			background-color: #fff;
			color: #000;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			border-bottom: 1rpx solid #efefef;

			&.focus {
				background: #fff;
				color: #e41805;
				transition-duration: 0.3s;
			}

			&.fix {
				width: 250rpx;
			}

			.item {
				padding: 0 5rpx;
				overflow: hidden;
				font-size: 28rpx;
			}
		}
	}

	.tab-pane-view {
		overflow: hidden;
		flex: 1;

		.tab-pane-group {
			display: block;
			white-space: nowrap;
			transition: all 0.3s;
			width: 100%;
			will-change: transform, left, top;
			height: 100%;
			.tab-pane-item {
				width: 100%;
				min-height: 100rpx;
				display: inline-block;
				white-space: initial;
				vertical-align: top;
				font-size: 24rpx;
				box-sizing: border-box;
				overflow: auto;
			}
		}
	}
}
</style>
